<template>
  <div class="wh100 resize-table-container">
    <div class="a-button-bar">
      <a-button type="primary" @click="edit">修改</a-button>
      <a-button type="primary" @click="remove">删除</a-button>
      <a-button type="primary" @click="add">新增</a-button>
    </div>
    <a-table class="a-base-table" :rowSelection="table.rowSelection" :columns="table.columns" :pagination="table.page" :data-source="table.data"
      :scroll="table.scroll" bordered>
    </a-table>
    <ag-modal-form :form="form"></ag-modal-form>
  </div>
</template>
<script>
const data = [];
for (let i = 0; i < 12; i++) {
  data.push({
    key: i,
    index: i + 1,
    beginTime: `Edrward ${i}`,
    endTime: 32
  });
}

import table from "@/mixins/table";
export default {
  mixins: [table],
  data() {
    return {
      form: {
        show: false,
        data: {},
        title: "新增",
        columns: [
          {
            label: "科目编码",
            prop: "index"
          },
          { label: "科目名称", prop: "x1" },
          { label: "方向", prop: "x2" },
          {
            label: "金额",
            prop: "x5",
            is: "a-input-number"
          }
        ]
      },
      table: this.tableInit({
        data,
        columns: [
          {
            title: "科目编码",
            width: 100,
            dataIndex: "index"
          },
          { title: "科目名称", width: 150, dataIndex: "beginTime" },
          { title: "方向", dataIndex: "x2" },
          { title: "金额", width: 150, dataIndex: "x3" }
        ]
      })
    };
  },
  methods: {
    add() {
      this.form.title = "新增";
      this.form.show = !this.form.show;
    },
    edit() {
      this.table.edit(() => {
        this.form.title = "编辑";
        this.form.show = !this.form.show;
      });
    },
    remove() {
      this.table.remove(() => {});
    }
  }
};
</script>
 